refactoring

2 files changed, 33 insertions, 208 deletions

diff --git a/src/routes/[username]/receive/+page.server.js b/src/routes/[username]/receive/+page.server.js
new file mode 100644
index 00000000..8d523213
--- /dev/null
+++ b/src/routes/[username]/receive/+page.server.js
@@ -0,0 +1,12 @@
+import { auth, post } from '$lib/utils';
+
+export const actions = {
+	default: async ({ cookies, request, parent }) => {
+		let { rate, user } = await parent();
+		let invoice = Object.fromEntries(await request.formData());
+		invoice.rate = rate;
+
+		let { uuid } = await post('/invoice', { invoice, user }, auth(cookies));
+		throw redirect(303, `/invoice/${uuid}`);
+	}
+};
diff --git a/src/routes/[username]/receive/+page.svelte b/src/routes/[username]/receive/+page.svelte
index f79e2df5..3c65279d 100644
--- a/src/routes/[username]/receive/+page.svelte
+++ b/src/routes/[username]/receive/+page.svelte
@@ -1,216 +1,29 @@
 <script>
-	import { AppHeader, Icon } from '$comp';
-	import { goto } from '$app/navigation';
-	import { invoiceAmount, invoiceAmountFiat, selectedRate, user } from '$lib/store';
-	import { f, s, post, warning, sats } from '$lib/utils';
-	import { page } from '$app/stores';
+	import { Icon, Numpad } from '$comp';
 	import { t } from '$lib/translations';
+	import { enhance } from '$app/forms';
 
-	let useFiat = true;
-	let amountFiat = 0;
-	let amountSats = 0;
-	let loading = false;
+	export let data;
+	let amount;
 
-	$: amount = parseInt(useFiat ? Math.round(amountFiat / ($selectedRate / sats)) : amountSats);
-
-	$: $invoiceAmount = parseInt(!amountSats ? amountFiat / ($selectedRate / sats) : amountSats);
-
-	$: $invoiceAmountFiat = parseInt(
-		amountFiat === 0 ? amountSats * ($selectedRate / sats) : amountFiat
-	);
-
-	$: amountSatsFormatted = s(amountSats);
-
-	$: amountFiatConverted = f(amountSats * ($selectedRate / sats), $user.currency);
-
-	$: amountSatsConverted = s(amountFiat / ($selectedRate / sats));
-
-	const numPad = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', '<'];
-
-	const handleInput = (value) => {
-		if (useFiat) {
-			if (amountFiat === 0 && value !== '.' && value !== '<' && value !== '0') {
-				amountFiat = value;
-			} else if ((amountFiat === 0 || amountFiat === '0') && value === '0') {
-				return;
-			} else if (amountFiat === 0 && value === '.') {
-				amountFiat = '0.';
-			} else if (amountFiat !== 0 && amountFiat.includes('.') && value === '.') {
-				return;
-			} else if (value === '<') {
-				if (amountFiat !== 0) {
-					amountFiat = amountFiat.slice(0, amountFiat.length - 1);
-					if (amountFiat.length === 0) {
-						amountFiat = 0;
-						amountSats = 0;
-					}
-				}
-			} else if (value !== '.' && value !== '<' && parseInt(amountFiat + value) > $selectedRate) {
-				warning($t('user.receive.lessThan1BTCWarning'));
-			} else if (amountFiat !== 0 && amountFiat.match(/\.../)) {
-				return;
-			} else {
-				amountFiat = amountFiat + value;
-			}
-		} else {
-			if (value === '.') {
-				return;
-			} else if (!amountSats && value !== '<' && value !== '0') {
-				amountSats = parseInt(value);
-			} else if (value === '<') {
-				if (amountSats !== 0) {
-					amountSats = Math.floor(amountSats / 10);
-					if (amountSats.length === 0) {
-						amountSats = 0;
-						amountFiat = 0;
-					}
-				}
-			} else if (value !== '<' && parseInt(amountSats + value) > sats) {
-				warning($t('user.receive.lessThan1BTCWarning'));
-			} else {
-				amountSats = parseInt(amountSats + value);
-			}
-		}
-	};
-
-	let submit = async () => {
-		loading = true;
-		let { uuid } = await post('/invoice', {
-			amount,
-			rate: $selectedRate,
-			prompt: true,
-			username: $page.params.username
-		});
-		goto(`/invoice/${uuid}`);
-	};
+	let { currency } = data.user;
 </script>
 
-{#if $user}
-	<AppHeader />
-
-	<div class="flex justify-center items-center mt-24 mb-3 px-3">
-		{#if $selectedRate}
-			<div class="space-y-5">
-				<!-- amounts -->
-				<div class="text-center">
-					<div class="text-5xl md:text-6xl font-semibold tracking-widest mb-1">
-						{useFiat
-							? `${
-									$user.currency === 'USD' ||
-									$user.currency === 'CAD' ||
-									$user.currency === 'AUD' ||
-									$user.currency === 'NZD' ||
-									$user.currency === 'MXN' ||
-									$user.currency === 'BRL' ||
-									$user.currency === 'HKD' ||
-									$user.currency === 'TWD'
-										? '$'
-										: $user.currency === 'JPY' || $user.currency === 'CNY'
-										? '¥'
-										: $user.currency === 'GBP'
-										? '£'
-										: $user.currency === 'EUR'
-										? '€'
-										: $user.currency === 'KRW'
-										? '₩'
-										: ''
-							  }${amountFiat}`
-							: amountSatsFormatted}<span class="tracking-normal text-base font-normal"
-							>{useFiat ? $user.currency : 'SAT'}</span
-						>
-					</div>
-					<span class="text-secondary mr-1"
-						>{useFiat ? `${amountSatsConverted} SAT` : amountFiatConverted}</span
-					>
-					<button
-						on:click={() => {
-							if (useFiat) {
-								amountSats = parseInt((amountFiat / ($selectedRate / sats)).toFixed(0));
-							} else {
-								amountFiat =
-									(amountSats * ($selectedRate / sats)).toFixed(2) > 0.0
-										? (amountSats * ($selectedRate / sats)).toFixed(2)
-										: 0;
-							}
-							useFiat = !useFiat;
-						}}><Icon icon="swap" style="inline hover:opacity-80" /></button
-					>
-				</div>
-
-				<!-- numpad -->
-				<div class="grid grid-cols-3 gap-2 w-full md:w-[300px] mx-auto">
-					{#each numPad as value}
-						{#if value === '<'}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white flex justify-center items-center hover:opacity-80"
-								on:click={() => handleInput(value)}
-							>
-								<svg
-									class="w-5"
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<path
-										d="M15 19L8 12L15 5"
-										stroke="currentColor"
-										stroke-width="2"
-										stroke-linecap="round"
-										stroke-linejoin="round"
-									/>
-								</svg>
-							</button>
-						{:else}
-							<button
-								class="bg-primary rounded-xl py-4 px-8 font-semibold active:bg-black active:text-white hover:opacity-80"
-								on:click={() => handleInput(value)}>{value}</button
-							>
-						{/if}
-					{/each}
-				</div>
+<form method="POST" class="flex justify-center items-center mt-24 mb-3 px-3" use:enhance>
+	<input type="hidden" name="amount" value={amount} />
+	<input type="hidden" name="prompt" value="true" />
 
-				<div class="space-y-3 w-full md:w-[300px] mx-auto">
-					<button
-						class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {$invoiceAmount ===
-							0 || loading
-							? 'opacity-50'
-							: 'opacity-100 hover:opacity-80'}"
-						on:click={submit}
-						disabled={$invoiceAmount === 0 || loading}
-					>
-						{#if loading}
-							<svg
-								class="mx-auto h-6 w-6 animate-spin text-white"
-								xmlns="http://www.w3.org/2000/svg"
-								fill="none"
-								viewBox="0 0 24 24"
-							>
-								<circle
-									class="opacity-25"
-									cx="12"
-									cy="12"
-									r="10"
-									stroke="currentColor"
-									stroke-width="4"
-								/>
-								<path
-									class="opacity-75"
-									fill="currentColor"
-									d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-								/>
-							</svg>
-						{:else}
-							<Icon icon="qr" style="mr-2" /> {$t('user.receive.showQR')}
-						{/if}
-					</button>
-				</div>
-			</div>
-		{:else}
-			<div
-				class="w-full md:w-[300px] h-[475px] md:h-[485px] animate-pulse bg-gray-400 rounded-xl"
-			/>
-		{/if}
+	<div class="space-y-3 w-full md:w-[300px] mx-auto">
+		<Numpad bind:amount bind:currency />
+		<button
+			type="submit"
+			class="bg-black text-white rounded-xl w-full h-[48px] flex justify-center items-center font-semibold {!amount
+				? 'opacity-50'
+				: 'opacity-100 hover:opacity-80'}"
+			disabled={!amount}
+		>
+			<Icon icon="qr" style="mr-2" />
+			{$t('user.receive.showQR')}
+		</button>
 	</div>
-{/if}
+</form>